<template>
    <div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm"
            :size="formSize" status-icon style="padding-top:20px;width: 600px;">
            <el-form-item label="医务账号" prop="account">
                <el-input v-model="ruleForm.account" placeholder="请输入账号" />
            </el-form-item>

            <el-form-item label="账号权限" prop="purvew">
                <el-select v-model="ruleForm.purview" placeholder="请选择身份">
                    <el-option label="医生" value="医生" />
                    <el-option label="护士" value="护士" />
                    <el-option label="医务管理员" value="医务管理员" />
                    <el-option label="实习助理" value="实习助理" />
                    <el-option label="药房" value="药房" />
                </el-select>
            </el-form-item>

            <el-form-item label="医务密码" prop="password">
                <el-input v-model="ruleForm.password" placeholder="请输入密码" />
            </el-form-item>

            <el-form-item label="确认密码" prop="password2">
                <el-input v-model="ruleForm.password2" type="password" placeholder="请再次输入密码" />
            </el-form-item>

            <el-form-item label="医务姓名" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入姓名" />
            </el-form-item>

            <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="ruleForm.sex">
                    <el-radio label="男" />
                    <el-radio label="女" />
                </el-radio-group>
            </el-form-item>

            <el-form-item label="身份证号" prop="idcard">
                <el-input v-model="ruleForm.idcard" placeholder="请输入身份证号" />
            </el-form-item>

            <el-form-item label="手机号" prop="phone">
                <el-input v-model="ruleForm.phone" placeholder="请输入手机号" />
            </el-form-item>

            <el-form-item label="上传照片">
                <!-- 照片上传 -->
                <el-upload class="avatar-uploader" action="http://129.211.169.131:21001/users/uploadheader"
                    :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submit">
                    确认创建
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'
import { usersAdd } from '@/API/user.api'

const formSize = ref('default')
const ruleForm = reactive({
    account: '',
    password: '',
    password2: '',
    name: '',
    sex: '',
    idcard: '',
    purview: '',
    phone: '',
    head: ''
})
// 表单验证
const rules = reactive<FormRules>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
    ],
    account: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'blur',
        },
    ],
    passworad: [
        {
            required: true,
            message: 'Please select Activity count',
            trigger: 'blur',
        },
    ],
    sex: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a date',
            trigger: 'blur',
        },
    ],
    idcard: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a time',
            trigger: 'blur',
        },
    ],
    purvew: [
        {
            type: 'array',
            required: true,
            message: 'Please select at least one activity type',
            trigger: 'blur',
        },
    ],
    phone: [
        {
            required: true,
            message: 'Please select activity resource',
            trigger: 'blur',
        },
    ],
    head: [
        { required: true, message: 'Please input activity form', trigger: 'blur' },
    ],
})
// 图片上传
const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    console.log(response);
    ruleForm.head = response.header
    imageUrl.value = response.header_url
}


const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}

// 提交按钮
const submit = async () => {
    const res = await usersAdd(ruleForm)
    console.log(res);
    if (res.data.code === 1) {
        ElMessage({
            type: 'success',
            message: res.data.msg,
        })
    } else {
        ElMessage({
            type: 'info',
            message: res.data.msg,
        })
    }
}

</script>

<style scoped lang="scss">
.avatar-uploader {
    width: 178px;
    height: 178px;
    border: 1px dashed #ccc;
    border-radius: 5px;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>